<template>
  <div id="settingDom">
    <div id="filterDom">
      <el-button type="primary" @click="getCardList()">添加</el-button>
    </div>
    <div id="settingList">
      <el-table :data="riskPersonListArr" stripe height="100%" style="width: 100%">
        <el-table-column prop="userAccount" label="账号" width="180" />
        <el-table-column prop="userPassword" label="密码" width="180" />
        <el-table-column prop="" label="操作">
          <template #default="scope">
            <el-button size="small" type="danger" v-show="scope.row.isAdmin != 1"
              @click="handleEdit(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pageDom">
      <el-pagination background layout="total,sizes,prev, pager, next" :current-page="currentPage"
        v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :total="total">
      </el-pagination>
    </div>

    <el-dialog v-model="dialogVisible" title="添加账号" width="420px" :before-close="handleClose">
      <el-form label-position="right" label-width="50px" :model="formLabelAlign" style="max-width: 460px">
        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogSub">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import axios from "@/utils/axios";
import { ref, reactive, onMounted, onUnmounted, defineEmits } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";


const router = useRouter();
const dialogVisible = ref(false);
const pageSize = ref(10); // 每页条数
const total = ref(0); // 总条数
const riskPersonListArr = reactive([]);
const currentPage = ref(1);
const formLabelAlign = reactive({
  account: '', // 添加的账号
  password: '', // 添加的密码
})
// 跳页
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getUserListData(currentPage.value);
};
// 更改每页显示的数量
const handleSizeChange = (pageSize) => {
  pageSize.value = pageSize;
  getUserListData(currentPage.value);
};
const handleClose = () => {

}
const getUserListData = (pageNum) => {
  var pageNum = pageNum || 1;
  axios
    .post("api/user/selectList", {
      pageNum: pageNum, //页数
      pageSize: pageSize.value, //页面显示数量
    })
    .then((res) => {
      if (res.status == 200) {
        total.value = res.data.total; // 总页数
        riskPersonListArr.splice(0);
        res.data.list.forEach((element) => {
          riskPersonListArr.push(element);
        });
        currentPage.value = res.data.pageNum;
        pageSize.value = res.data.pageSize;
      }
    })
    .catch((res) => { });
};

const isLoginTime = ref();
const isLogin = () => {
  if (sessionStorage.time) {
    var nowDate = new Date().getTime();
    if (Number(nowDate) - Number(sessionStorage.time) > 2 * 60 * 60 * 1000) {
      ElMessageBox.alert("登录过期", "提示", {
        confirmButtonText: "重新登陆",
        callback: (action) => {
          router.push({
            name: "login",
          });
        },
      });
    } else {
      // console.log("检验成功，没有超时")
      isLoginTime.value = setTimeout(() => {
        isLogin();
      }, 60 * 1000);
    }
  } else {
    clearTimeout(isLoginTime.value);
    ElMessageBox.alert("请重新登录", "提示", {
      confirmButtonText: "重新登陆",
      callback: (action) => {
        router.push({
          name: "login",
        });
      },
    });
  }
};
// 添加人员的接口
const addUserAjax = () => {
  axios
    .post("api/user/addUser", {
      userAccount: formLabelAlign.account,
      userPassword: formLabelAlign.password,
    })
    .then((res) => {
      if (res.status == 200) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });

        dialogVisible.value = false;
        formLabelAlign.password = "";
        formLabelAlign.account = "";
        getUserListData(currentPage.value);
      } else {
        ElMessage({
          message: "添加成功",
          type: "warning",
        });
      }
    })
    .catch((res) => { });
};


// 添加人员
const getCardList = () => {
  dialogVisible.value = true;
}
// 点击确定
const dialogSub = () => {
  if (formLabelAlign.account == "") {
    ElMessage({
      message: "请输入账号",
      type: "warning",
    });
  } else if (formLabelAlign.password == "") {
    ElMessage({
      message: "请输入密码",
      type: "warning",
    });
  } else {
    addUserAjax();
  }
};

onMounted(() => {
  isLogin();
  if (sessionStorage.isAdmin != 1) {
    ElMessage({
      message: "暂无访问权限",
      type: "warning",
    });
    return
  }
  getUserListData();
});
onUnmounted(() => {
  clearTimeout(isLoginTime.value);
});
// 点击查看
const handleEdit = (i, data) => {
  // console.log(data);
  ElMessageBox.confirm("确认删除账号\"" + data.userAccount + "\"吗？", "确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updataStatusAjax(data);
    })
    .catch(() => { });

};

const updataStatusAjax = (item) => {
  axios
    .post("api/user/delUser", {
      userIdWeb: item.userId, // id
    })
    .then((res) => {
      // console.log(res);
      if (res.status == 200) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getUserListData(currentPage.value);
      }
    })
    .catch((res) => { });
}

</script>
<style lang="scss" scoped>
#settingDom {
  height: 100%;
}

#filterDom {
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;

  .status,
  .search {
    margin-left: 12px;
  }

  .name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 256px;
    margin-right: 12px;

    .el-input {
      width: 220px;
    }
  }
}

#settingList {
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 20px;

  ul {
    overflow: hidden;
    zoom: 1;
  }

  li {
    width: 20%;
    float: left;
    height: 374px;
    margin-bottom: 5px;
  }

  .videoSelf {
    height: 300px;
  }

  .che {
    line-height: 32px;
  }
}

#pageDom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialogDiv {
  margin-bottom: 20px;
  font-size: 16px;
}
</style>
